<template>
  <div class="school">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <h2>收到的学生姓名:{{studentName}}</h2>
  </div>
</template>

<script>
// 1. 引入发布-订阅的依赖库
import pubsub from 'pubsub-js'
export default {
    name:'School',
    data() {
        return {
            name:'上海交通大学',
            address:'上海',
            studentName:''
        }
    },
    methods:{
      waitName(msgName,data){
        console.log(msgName)
        this.studentName = data
      }
    },
    mounted(){
      /*this.$bus.$on('hello',(data) => {
        console.log('school组件，接收到了data：'+data)
        this.studentName = data
      })*/
    //  2.订阅消息
    // 回调中有两个参数msgName-消息名，data-参数
    // 每次订阅到消息都会返回一个不同的id，取消订阅要用，可以给到Vue，在beforeDestroy中使用
    // 写法(1). 使用普通函数，this是undefined，因为是第三方库，使用箭头函数，使this指向Vue
    // this.pubid = pubsub.subscribe('hello',function(msgName,data){ 
    //   console.log(this)
    //   console.log('有人发布了hello消息',msgName,data)
    //  })
    // 写法(2).
    //  this.pubid = pubsub.subscribe('hello',(msgName,data) => {
    //   console.log(this)
    //   console.log('有人发布了hello消息',msgName,data)
    //  })
    // 写法(3).指定方法:注意方法的参数
      this.pubid = pubsub.subscribe('hello',this.waitName)
    },
    beforeDestroy(){
      //在使用傀儡的组件被销毁之前，一点要解绑事件
      /*this.$bus.$off('hello')*/
      // 3.取消订阅--根据消息id
      pubsub.unsubscribe(this.pubid)
    }
}
</script>

<style lang="css" scoped>
.school{
    background-color: skyblue;
    padding: 5px;
}
</style>